<template>
  <div style="height:480px;position: relative;">
    <IEcharts :option="jqTimelist" />
  </div>
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  import pieEchartsOption from '@/utils/echarts/pie.js'
  export default {
    components: {
      IEcharts
    },
    props: {
      dateItem: {
        type: String,
        default: ''
      },
      dateList: {
        type: Array,
        default: []
      }
    },
    watch: {
      dateItem: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              // console.log('cao1')
              this.dateType = 'i'
              // this.getData()
            }

          }
        },
        deep: true
      },
      dateList: {
        handler (newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue.length !== 0) {
              this.dateType = 'd'
              // this.getData()
              // console.log('cao2')
            }

          }
        },
        immediate: true,
        deep: true
      },
    },
    data () {
      return {
        dateType: 'i',
        jqTimelist: {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }, "formatter": "{b}:{c}%",
          },
          title: {
            text: '全局每月工单退件率统计',
            x: 'center'
          },
          grid: {
            left: '20%',
            right: '25%',
            top: '80px',
            bottom: '50px',
            containLabel: false
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            name: '单位（%）',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'line',
            smooth: true
          }]
        }
      }
    },
    created () {
      this.getEchartsData()
    },
    methods: {
      getEchartsData () {
        this.$axios.post('/count/workCharts/SendBackCharts').then(res => {
          if (res) {
            // console.log(res, 23333)
            this.jqTimelist.xAxis.data = res.map(item => item.name)
            this.jqTimelist.series[0].data = res.map(item => item.number)
          }
        })
      },
    }

  }
</script>

<style lang='scss' scoped>
  .warn_gif {
    position: absolute;
    top: 80px;
    left: 20px;
    width: 100%;
    // text-align: center;
    img {
      display: block;
      width: 50%;
      margin: 0 25%;
    }
  }
</style>
